<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<jsp:include page="../../include/top.jsp"/>
<div class="main_body">
    <div class="span9 page_message">
        <section id="contents">
            <ul class="tab-nav nav">
                <li><a href="${BasePath}/order/product/list?${PublicParams}">产品列表<span
                        class="arrow fa fa-sort-up"></span></a></li>
                <li>
                    <a href="${BasePath}/order/product/toAdd?${PublicParams}">产品添加/修改<span class="arrow fa fa-sort-up"></span></a>
                </li>
                <li class="current">
                    <a href="">批量更新产品适用机构<span class="arrow fa fa-sort-up"></span></a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="tab1" class="tab-pane in tab1">
                    <!-- 表单 -->
                    <form class="form-horizontal" name="myForm" id="myForm" action="${BasePath}/order/product/saveProductInstitution" method="post">
                        <input type="hidden" name="type" value="${type }"/>
                        <input type="hidden" name="itemId" value="${itemId }"/>
                        <div class="form-item cf toggle-idInstitution">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                可选机构：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <table width="600">
                                    <tr>
                                        <td width="40%" valign="top">
                                            <select id="institutionId" name="institutionId" size="20"  style="width:300px;">
                                                <c:forEach items="${institutionList}" var="inst">
                                                    <option value="${inst.id}">${inst.name}</option>
                                                </c:forEach>
                                            </select>
                                        </td>
                                        <td width="10%" valign="middle" align="center">
                                            <input type="button" value="增加" onclick="addInst()">
                                            <br/>
                                            <input type="button" value="删除" onclick="delInst()">
                                        </td>
                                        <td width="50%" valign="top">
                                            <select id="selectedInstitutions" name="selectedInstitutions" size="20" style="width: 300px;">
                                            </select>
                                            <input type="hidden" name="institutionIds" id="institutionIds" value=""/>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="form-item cf toggle-idInstitution">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                可选套餐：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <table width="600">
                                    <tr>
                                        <td width="40%" valign="top">
                                            <select id="institutionId2" name="institutionId2" onchange="getProduct()" style="width:300px;">
                                                <option value="-1">请选择合作商家</option>
                                                <c:forEach items="${institutionList}" var="inst">
                                                    <option value="${inst.id}">${inst.name}</option>
                                                </c:forEach>
                                            </select>
                                            <select id="productId" name="productId" size="20" style="width: 300px;">
                                            </select>
                                        </td>
                                        <td width="10%" valign="middle" align="center">
                                            <input type="button" value="增加" onclick="addPro()">
                                            <br/>
                                            <input type="button" value="删除" onclick="delPro()">
                                        </td>
                                        <td width="50%" valign="top">
                                            <p style="line-height: 35px;">&nbsp;</p>
                                            <select id="selectedProducts" name="selectedProducts" size="20" style="width: 300px;">
                                            </select>
                                            <input type="hidden" name="productIds" id="productIds" value=""/>
                                        </td>
                                    </tr>
                                </table>

                            </div>
                        </div>
                        <button class="btn submit-btn" id="submit" type="button" onclick="submitForm()"/>
                        确 定
                        </button>
                    </form>
                </div>
            </div>
        </section>
    </div>
</div>
<jsp:include page="../../include/bottom.jsp"/>
<script language="javascript">
    function submitForm() {
        var productIds = [];
        var institutionIds = [];
        $('#selectedProducts option').each(function () {
            productIds.push(this.value);
        });
        $('#selectedInstitutions option').each(function () {
            institutionIds.push(this.value);
        });
        if (institutionIds.length == 0) {
            alert("请选择机构!");
            return false;
        }
        if (productIds.length == 0) {
            alert("请选择套餐!");
            return false;
        }
        $("#productIds").val(productIds.join(","));
        $("#institutionIds").val(institutionIds.join(","));
        $('#myForm').ajaxSubmit(function (data) {
            if (data.errno == "1") {
                alert(data.errdesc);
            } else {
                alert("操作成功！");
                $("#productIds").val("");
                $("#institutionIds").val("");
                $("#selectedProducts option").remove();
                $("#selectedInstitutions option").remove();
            }
        });
    }


    var groupOrderId = "${bean.id}";
    if (groupOrderId != "") {
        $.getJSON("${BasePath}/order/product/getJSON", {groupOrderId: groupOrderId}, function (data) {
            $.each(data.data, function (InfoIndex, Info) {
                $("#selectedProducts").append('<option value=' + Info.id + '>' + Info.institutionName + "-" + Info.name + '</option>');
            });
        });
    }
    function getProduct() {
        var val = $("#institutionId2").val();
        $("#productId option").remove();
        if (val == "-1") {
            return;
        }
        $.getJSON("${BasePath}/order/product/getJSON", {institutionId: val}, function (data) {
            $.each(data.data, function (InfoIndex, Info) {
                $("#productId").append('<option value=' + Info.id + '>' + Info.name + '</option>');
            });
        });
    }
    function addInst() {
        var inst = document.getElementById("institutionId");
        var insts = document.getElementById("selectedInstitutions");

        if (inst.value != -1 && inst.value != "") {
            for (var i = 0; i < insts.options.length; i++) {
                if (insts.options[i].value == inst.value) {
                    return;
                }
            }
            var option = document.createElement("option");
            insts.options.add(option);
            option.value = inst.value;
            option.innerHTML = inst.options[inst.selectedIndex].text;

        }
    }
    function delInst() {
        var spro = document.getElementById("selectedInstitutions");
        var oOptions = spro.options;
        for (var i = oOptions.length - 1; i >= 0; i--) {
            if (oOptions[i].selected) spro.remove(i);
        }
    }
    function addPro() {
        var pro = document.getElementById("productId");
        var spro = document.getElementById("selectedProducts");

        if (pro.value != -1 && pro.value != "") {
            for (var i = 0; i < spro.options.length; i++) {
                if (spro.options[i].value == pro.value) {
                    return;
                }
            }
            var option = document.createElement("option");
            spro.options.add(option);
            var insti = document.getElementById("institutionId2");
            option.value = pro.value;
            option.innerHTML = pro.options[pro.selectedIndex].text + "-" + insti.options[insti.selectedIndex].text;

        }
    }
    function delPro() {
        var spro = document.getElementById("selectedProducts");
        var oOptions = spro.options;
        for (var i = oOptions.length - 1; i >= 0; i--) {
            if (oOptions[i].selected) spro.remove(i);
        }
    }
</script>